/*----------------------------------------*\
  PORTRAIT
\*----------------------------------------*/

.portrait {
  @apply flex flex-col items-center;
  @apply lg:py-6;

  @screen lg {
    @apply grid grid--responsive-cols-2 gap--responsive items-start;
  }

  @screen xl {
    @apply grid--responsive-cols-3;
  }
}

.portrait__image {
  @apply block w-full;
  @apply xl:col-span-2;
  @apply pr-8 md:pr-0;

  & img {
    @apply w-full;
    @apply max-w-none;

    /* overlapping width of the picture: 100% +  margin-top of the card + responsive gap */
    @screen lg {
      width: calc(100% + theme('spacing.10') + theme('spacing.10'));
    }

    @screen xl {
      width: calc(100% + theme('spacing.12') + theme('spacing.12'));
    }

    @screen 3xl {
      width: calc(100% + theme('spacing.16') + theme('spacing.16'));
    }
  }
}

.portrait__card {
  @apply block;
  @apply md:max-w-xl;
  @apply relative;
  @apply ml-8 md:ml-0;
  @apply -top-8 lg:top-10 xl:top-12 3xl:top-16;
}

.portrait__card__body {
  @apply px-6 pt-10 pb-12;
  @apply space-y-4;
}
